import React, { useState, useEffect } from 'react'

export default function TestuseState() {
  const [counter, setCounter] = useState(0)
  const [age, setAge] = useState(0)
  // 1.第一个参数相当于DidMount(dom更新完成之后回调)
  // 2.第一个参数的返回值相当于unmounted
  // 3.第三个参数是性能优化的依赖
  // 1.不写的时候相当于，每次渲染都会执行
  // 2.写一个空数组的时候，相当于不依赖
  // 3.写对应的依赖时，依赖发生变化时会执行
  useEffect(() => {
    console.log('useEffect被执行了1')
    document.title = counter
    return () => {
      document.title = 'React App'
      console.log('useEffect被执行了2')
    }
  }, [counter])
  useEffect(() => {
    console.log('useEffect被执行了111111')
    return () => {
      console.log('useEffect被执行了22222')
    }
  }, [])
  useEffect(() => {
    console.log('useEffect被执行了111111111111111111111111111')
    return () => {
      console.log('useEffect被执行了22222222222222222222')
    }
  }, [age])

  return (
    <>
      <div>{`counter: ${counter}`}</div>
      <div>{`age: ${age}`}</div>
      <hr />
      <button onClick={() => setCounter(counter + 1)}> counter + 1</button>
      <button onClick={() => setAge(age + 1)}> age + 1</button>
    </>
  )
}
